<template>
<!--  vue3中可以没有根标签-->
<h1>学生信息</h1>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h3>工作种类：{{job.type}}</h3>
  <h3>工作薪水：{{job.salary}}</h3>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
import {ref,reactive} from 'vue'

export default {
  name: 'App',
 setup(){
    //数据
    let name =ref('小王')
    let age = ref(19)
   let job = reactive({
     type:'前端工程师',
     salary:'30k'
   })
//方法
   function changeInfo(){
      name.value='老王',
          age.value=20,
          job.type='后端工程师',
          job.salary='62K'

   }
//返回一个对象
   return{
      name,age,changeInfo,job
   }
 }
}
</script>

<style>

</style>
